<template>
  <div class="wrapper">
    <avatar :src="data.avatar" class="avatar"></avatar>
    <div class="comment">
      <div class="user info">
        <router-link :to="`/user/${data.user.userName}`"
          ><span class="user-name">{{ data.user.nickName }}</span></router-link
        >
        <level-tag :level="data.user.userLevel" class="lv-icon"></level-tag>
      </div>
      <div class="comment-body">
        {{ data.content }}
      </div>
      <div class="comment-info info">
        <span class="comment-time">{{ replyTime(data.createTime) }}</span>
        <span class="comment-like">{{ data.likeCount }}点赞</span>
        <span class="comment-reply" @click="reply()">回复</span>
      </div>
      <div class="child-comments">
        <!-- {{ data.comments }} -->
        <ChildComment
          v-for="(item, index) in data.comments"
          :data="item"
          :key="index"
          @reply="reply"
          @getReply="getReply"
        >
        </ChildComment>
        <!-- <Transition> -->
        <div class="reply" v-if="showComment">
          <PostComment
            @submit="submitComment"
            :placeholder="placeholder"
            ref="postCommentRef"
          ></PostComment>
        </div>
        <!-- </Transition> -->

        <!-- <p v-for="(item, index) in data.comments" :key="index">{{ item.content }}</p> -->
      </div>
    </div>
    <!-- <el-avatar :size="50" :src="circleUrl" /> -->

    <!-- <button class="btn" @click="handleClick">发表评论</button> -->
  </div>
  <el-divider />
</template>

<script setup lang="ts">
import { ref, computed, watch, watchEffect, nextTick, toRefs } from "vue";
import Avatar from "@/components/Avatar.vue";
import ChildComment from "./ChildComment.vue";
import PostComment from "./PostComment.vue";

import bus from "./bus";

const showComment = ref(false);

const emit = defineEmits(["reply"]);

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const showCommentId = ref(null);

const placeholder = ref("");

bus.on("hide", () => {
  showComment.value = false;
});

const tempCommentInfo = ref({});

// console.log(Object.keys(tempCommentInfo.value).length);

const postCommentRef = ref<any>(null);

// watch(
//   () => postCommentRef.value,
//   (val) => {
//     if (val) val.focus();
//   }
// );

// watchEffect(() => postCommentRef.value.focus());

function submitComment(value) {
  console.log(postCommentRef.value);

  // postCommentRef.clear();

  if (Object.keys(tempCommentInfo.value).length !== 0)
    emit("reply", {
      ...tempCommentInfo.value,
      content: value,
      ack: () => {
        postCommentRef.value.clear();
        showComment.value = false;
      },
    });
}

function getReply(id: any, callback: Function) {
  console.log(id);

  const { comments: data } = props.data;
  let ret = data.filter((item: any) => item.id == id)[0].user;
  callback(ret);
}

// function childReply(data: any) {
//   console.log(data);
//   // 通知其他组件隐藏回复组件
//   bus.emit("hide");
//   showComment.value = true;
// }

/**
 * type: 0 回复一级评论 1 回复二级评论
 */
const reply = (
  data: any = {
    answerId: 0,
    blogId: props.data.blogId, // 博客id
    replyUser: props.data.user, // 回复的用户信息
  }
) => {
  // console.log(data);
  placeholder.value = `回复@${data.replyUser.nickName}:`;
  data.parentId = props.data.id; // 设置关联的一级评论

  // if (type === 0) {
  // }

  // 通知其他组件隐藏回复组件
  bus.emit("hide");
  tempCommentInfo.value = data;
  // emit("reply", data);
  showComment.value = true;
  nextTick(() => {
    postCommentRef.value.focus();
  });
};
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  // align-items: center;
  font-family: "Microsoft YaHei" 14px;
}
.comment {
  width: 100%;
  padding: 0 10px;

  .user {
    font-size: 0.8rem;
    .user-name {
      color: #6d757a;
      font-weight: bold;
    }
  }
}

.comment-info {
  color: #6d757a;

  .comment-reply {
    cursor: pointer;
    &:hover {
      color: var(--app-main-color);
    }
  }
  & > * {
    margin-right: 10px;
  }
}

.child-comments {
  margin-top: 10px;
}

.info {
  font-size: 0.8rem;
}

.lv-icon {
  vertical-align: top;
}
</style>
